<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4591021" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xeabd;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xeabd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac1;</span>
                <div class="name">剪切</div>
                <div class="code-name">&amp;#xeac1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac4;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xeac4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead9;</span>
                <div class="name">购物</div>
                <div class="code-name">&amp;#xead9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeada;</span>
                <div class="name">单选未选中</div>
                <div class="code-name">&amp;#xeada;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadb;</span>
                <div class="name">单选选中</div>
                <div class="code-name">&amp;#xeadb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadc;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xeadc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadd;</span>
                <div class="name">蓝牙</div>
                <div class="code-name">&amp;#xeadd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeade;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xeade;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadf;</span>
                <div class="name">多选未选中</div>
                <div class="code-name">&amp;#xeadf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae0;</span>
                <div class="name">声音</div>
                <div class="code-name">&amp;#xeae0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae1;</span>
                <div class="name">停止</div>
                <div class="code-name">&amp;#xeae1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae5;</span>
                <div class="name">英文</div>
                <div class="code-name">&amp;#xeae5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaeb;</span>
                <div class="name">震动</div>
                <div class="code-name">&amp;#xeaeb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaed;</span>
                <div class="name">主题</div>
                <div class="code-name">&amp;#xeaed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaef;</span>
                <div class="name">按钮_关闭</div>
                <div class="code-name">&amp;#xeaef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf0;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xeaf0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf1;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xeaf1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf2;</span>
                <div class="name">表格</div>
                <div class="code-name">&amp;#xeaf2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf3;</span>
                <div class="name">按钮_选中</div>
                <div class="code-name">&amp;#xeaf3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf4;</span>
                <div class="name">撤销</div>
                <div class="code-name">&amp;#xeaf4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf5;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xeaf5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf6;</span>
                <div class="name">对号</div>
                <div class="code-name">&amp;#xeaf6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf7;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xeaf7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf8;</span>
                <div class="name">菜单</div>
                <div class="code-name">&amp;#xeaf8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf9;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xeaf9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafa;</span>
                <div class="name">关于</div>
                <div class="code-name">&amp;#xeafa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafb;</span>
                <div class="name">警告</div>
                <div class="code-name">&amp;#xeafb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafc;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xeafc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafd;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xeafd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafe;</span>
                <div class="name">扫一扫</div>
                <div class="code-name">&amp;#xeafe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb00;</span>
                <div class="name">Android更多</div>
                <div class="code-name">&amp;#xeb00;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb01;</span>
                <div class="name">ios更多</div>
                <div class="code-name">&amp;#xeb01;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb03;</span>
                <div class="name">箭头_列表向右</div>
                <div class="code-name">&amp;#xeb03;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb04;</span>
                <div class="name">箭头_列表收起</div>
                <div class="code-name">&amp;#xeb04;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb05;</span>
                <div class="name">箭头_列表向左</div>
                <div class="code-name">&amp;#xeb05;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb06;</span>
                <div class="name">箭头_列表展开</div>
                <div class="code-name">&amp;#xeb06;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb07;</span>
                <div class="name">箭头_上一页</div>
                <div class="code-name">&amp;#xeb07;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb08;</span>
                <div class="name">箭头_下一页</div>
                <div class="code-name">&amp;#xeb08;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb09;</span>
                <div class="name">箭头_向右</div>
                <div class="code-name">&amp;#xeb09;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb0a;</span>
                <div class="name">箭头_向左</div>
                <div class="code-name">&amp;#xeb0a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb0b;</span>
                <div class="name">箭头_向右两次</div>
                <div class="code-name">&amp;#xeb0b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb0c;</span>
                <div class="name">箭头_上下切换</div>
                <div class="code-name">&amp;#xeb0c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb0d;</span>
                <div class="name">箭头_页面_向上</div>
                <div class="code-name">&amp;#xeb0d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb0e;</span>
                <div class="name">箭头_向下</div>
                <div class="code-name">&amp;#xeb0e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb0f;</span>
                <div class="name">箭头_向上</div>
                <div class="code-name">&amp;#xeb0f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb10;</span>
                <div class="name">箭头_向左两次</div>
                <div class="code-name">&amp;#xeb10;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb11;</span>
                <div class="name">箭头_页面_向下</div>
                <div class="code-name">&amp;#xeb11;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb12;</span>
                <div class="name">箭头_页面_向右</div>
                <div class="code-name">&amp;#xeb12;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb13;</span>
                <div class="name">箭头_左右切换</div>
                <div class="code-name">&amp;#xeb13;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb14;</span>
                <div class="name">箭头_页面_向左</div>
                <div class="code-name">&amp;#xeb14;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb15;</span>
                <div class="name">末端展开</div>
                <div class="code-name">&amp;#xeb15;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb16;</span>
                <div class="name">末端左右展开</div>
                <div class="code-name">&amp;#xeb16;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb17;</span>
                <div class="name">取消全屏</div>
                <div class="code-name">&amp;#xeb17;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb18;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xeb18;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb21;</span>
                <div class="name">踩</div>
                <div class="code-name">&amp;#xeb21;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb22;</span>
                <div class="name">表情</div>
                <div class="code-name">&amp;#xeb22;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb23;</span>
                <div class="name">按钮-赞</div>
                <div class="code-name">&amp;#xeb23;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb24;</span>
                <div class="name">表情_笑</div>
                <div class="code-name">&amp;#xeb24;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb25;</span>
                <div class="name">成长</div>
                <div class="code-name">&amp;#xeb25;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb26;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xeb26;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb27;</span>
                <div class="name">短信</div>
                <div class="code-name">&amp;#xeb27;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb28;</span>
                <div class="name">个人头像</div>
                <div class="code-name">&amp;#xeb28;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb29;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xeb29;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb2a;</span>
                <div class="name">群组</div>
                <div class="code-name">&amp;#xeb2a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb2b;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xeb2b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb2c;</span>
                <div class="name">添加好友</div>
                <div class="code-name">&amp;#xeb2c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb2d;</span>
                <div class="name">旺旺离开</div>
                <div class="code-name">&amp;#xeb2d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb2e;</span>
                <div class="name">赞</div>
                <div class="code-name">&amp;#xeb2e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb2f;</span>
                <div class="name">待办任务_取消</div>
                <div class="code-name">&amp;#xeb2f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb30;</span>
                <div class="name">待办任务</div>
                <div class="code-name">&amp;#xeb30;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb31;</span>
                <div class="name">闹钟</div>
                <div class="code-name">&amp;#xeb31;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb32;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xeb32;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb33;</span>
                <div class="name">日期</div>
                <div class="code-name">&amp;#xeb33;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb34;</span>
                <div class="name">树状图</div>
                <div class="code-name">&amp;#xeb34;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb35;</span>
                <div class="name">云</div>
                <div class="code-name">&amp;#xeb35;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb36;</span>
                <div class="name">饼图</div>
                <div class="code-name">&amp;#xeb36;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb37;</span>
                <div class="name">云上传</div>
                <div class="code-name">&amp;#xeb37;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb38;</span>
                <div class="name">云下载</div>
                <div class="code-name">&amp;#xeb38;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb39;</span>
                <div class="name">折线图</div>
                <div class="code-name">&amp;#xeb39;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb3a;</span>
                <div class="name">柱状图</div>
                <div class="code-name">&amp;#xeb3a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb3b;</span>
                <div class="name">包裹_揽收</div>
                <div class="code-name">&amp;#xeb3b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb3c;</span>
                <div class="name">包裹_环保盒</div>
                <div class="code-name">&amp;#xeb3c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb3d;</span>
                <div class="name">包裹_打开</div>
                <div class="code-name">&amp;#xeb3d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb3e;</span>
                <div class="name">包裹_盒子</div>
                <div class="code-name">&amp;#xeb3e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb3f;</span>
                <div class="name">地点定位</div>
                <div class="code-name">&amp;#xeb3f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb40;</span>
                <div class="name">地图_定位</div>
                <div class="code-name">&amp;#xeb40;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb41;</span>
                <div class="name">飞机_起飞</div>
                <div class="code-name">&amp;#xeb41;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb42;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xeb42;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb43;</span>
                <div class="name">高级集包</div>
                <div class="code-name">&amp;#xeb43;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb44;</span>
                <div class="name">货车</div>
                <div class="code-name">&amp;#xeb44;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb45;</span>
                <div class="name">服务</div>
                <div class="code-name">&amp;#xeb45;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb46;</span>
                <div class="name">经理人</div>
                <div class="code-name">&amp;#xeb46;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb47;</span>
                <div class="name">货品分流</div>
                <div class="code-name">&amp;#xeb47;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb48;</span>
                <div class="name">驿站</div>
                <div class="code-name">&amp;#xeb48;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb49;</span>
                <div class="name">短信群发</div>
                <div class="code-name">&amp;#xeb49;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb4a;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xeb4a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb4b;</span>
                <div class="name">通知中心</div>
                <div class="code-name">&amp;#xeb4b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb4c;</span>
                <div class="name">邮件</div>
                <div class="code-name">&amp;#xeb4c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb4d;</span>
                <div class="name">登出</div>
                <div class="code-name">&amp;#xeb4d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb4e;</span>
                <div class="name">个人信息</div>
                <div class="code-name">&amp;#xeb4e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb4f;</span>
                <div class="name">按钮_个人中心</div>
                <div class="code-name">&amp;#xeb4f;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1718778359397') format('woff2'),
       url('iconfont.woff?t=1718778359397') format('woff'),
       url('iconfont.ttf?t=1718778359397') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianqie"></span>
            <div class="name">
              剪切
            </div>
            <div class="code-name">.icon-jianqie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwu"></span>
            <div class="name">
              购物
            </div>
            <div class="code-name">.icon-gouwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuanweixuanzhong"></span>
            <div class="name">
              单选未选中
            </div>
            <div class="code-name">.icon-danxuanweixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuanxuanzhong"></span>
            <div class="name">
              单选选中
            </div>
            <div class="code-name">.icon-danxuanxuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-kefu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lanya"></span>
            <div class="name">
              蓝牙
            </div>
            <div class="code-name">.icon-lanya
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianjie"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.icon-lianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuanweixuanzhong"></span>
            <div class="name">
              多选未选中
            </div>
            <div class="code-name">.icon-duoxuanweixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengyin"></span>
            <div class="name">
              声音
            </div>
            <div class="code-name">.icon-shengyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingzhi"></span>
            <div class="name">
              停止
            </div>
            <div class="code-name">.icon-tingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingwen"></span>
            <div class="name">
              英文
            </div>
            <div class="code-name">.icon-yingwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhendong"></span>
            <div class="name">
              震动
            </div>
            <div class="code-name">.icon-zhendong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuti"></span>
            <div class="name">
              主题
            </div>
            <div class="code-name">.icon-zhuti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anniu_guanbi"></span>
            <div class="name">
              按钮_关闭
            </div>
            <div class="code-name">.icon-anniu_guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.icon-anquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangzhu"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.icon-bangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge"></span>
            <div class="name">
              表格
            </div>
            <div class="code-name">.icon-biaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anniu_xuanzhong"></span>
            <div class="name">
              按钮_选中
            </div>
            <div class="code-name">.icon-anniu_xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chexiao"></span>
            <div class="name">
              撤销
            </div>
            <div class="code-name">.icon-chexiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duihao"></span>
            <div class="name">
              对号
            </div>
            <div class="code-name">.icon-duihao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidan"></span>
            <div class="name">
              菜单
            </div>
            <div class="code-name">.icon-caidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanyu"></span>
            <div class="name">
              关于
            </div>
            <div class="code-name">.icon-guanyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinggao"></span>
            <div class="name">
              警告
            </div>
            <div class="code-name">.icon-jinggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lishijilu"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.icon-lishijilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saoyisao"></span>
            <div class="name">
              扫一扫
            </div>
            <div class="code-name">.icon-saoyisao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Androidgengduo"></span>
            <div class="name">
              Android更多
            </div>
            <div class="code-name">.icon-Androidgengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iosgengduo"></span>
            <div class="name">
              ios更多
            </div>
            <div class="code-name">.icon-iosgengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_liebiaoxiangyou"></span>
            <div class="name">
              箭头_列表向右
            </div>
            <div class="code-name">.icon-jiantou_liebiaoxiangyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_liebiaoshouqi"></span>
            <div class="name">
              箭头_列表收起
            </div>
            <div class="code-name">.icon-jiantou_liebiaoshouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_liebiaoxiangzuo"></span>
            <div class="name">
              箭头_列表向左
            </div>
            <div class="code-name">.icon-jiantou_liebiaoxiangzuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_liebiaozhankai"></span>
            <div class="name">
              箭头_列表展开
            </div>
            <div class="code-name">.icon-jiantou_liebiaozhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_shangyiye"></span>
            <div class="name">
              箭头_上一页
            </div>
            <div class="code-name">.icon-jiantou_shangyiye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_xiayiye"></span>
            <div class="name">
              箭头_下一页
            </div>
            <div class="code-name">.icon-jiantou_xiayiye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_xiangyou"></span>
            <div class="name">
              箭头_向右
            </div>
            <div class="code-name">.icon-jiantou_xiangyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_xiangzuo"></span>
            <div class="name">
              箭头_向左
            </div>
            <div class="code-name">.icon-jiantou_xiangzuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_xiangyouliangci"></span>
            <div class="name">
              箭头_向右两次
            </div>
            <div class="code-name">.icon-jiantou_xiangyouliangci
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_shangxiaqiehuan"></span>
            <div class="name">
              箭头_上下切换
            </div>
            <div class="code-name">.icon-jiantou_shangxiaqiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_yemian_xiangshang"></span>
            <div class="name">
              箭头_页面_向上
            </div>
            <div class="code-name">.icon-jiantou_yemian_xiangshang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_xiangxia"></span>
            <div class="name">
              箭头_向下
            </div>
            <div class="code-name">.icon-jiantou_xiangxia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_xiangshang"></span>
            <div class="name">
              箭头_向上
            </div>
            <div class="code-name">.icon-jiantou_xiangshang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_xiangzuoliangci"></span>
            <div class="name">
              箭头_向左两次
            </div>
            <div class="code-name">.icon-jiantou_xiangzuoliangci
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_yemian_xiangxia"></span>
            <div class="name">
              箭头_页面_向下
            </div>
            <div class="code-name">.icon-jiantou_yemian_xiangxia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_yemian_xiangyou"></span>
            <div class="name">
              箭头_页面_向右
            </div>
            <div class="code-name">.icon-jiantou_yemian_xiangyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_zuoyouqiehuan"></span>
            <div class="name">
              箭头_左右切换
            </div>
            <div class="code-name">.icon-jiantou_zuoyouqiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_yemian_xiangzuo"></span>
            <div class="name">
              箭头_页面_向左
            </div>
            <div class="code-name">.icon-jiantou_yemian_xiangzuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moduanzhankai"></span>
            <div class="name">
              末端展开
            </div>
            <div class="code-name">.icon-moduanzhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moduanzuoyouzhankai"></span>
            <div class="name">
              末端左右展开
            </div>
            <div class="code-name">.icon-moduanzuoyouzhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quxiaoquanping"></span>
            <div class="name">
              取消全屏
            </div>
            <div class="code-name">.icon-quxiaoquanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanping"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cai"></span>
            <div class="name">
              踩
            </div>
            <div class="code-name">.icon-cai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqing"></span>
            <div class="name">
              表情
            </div>
            <div class="code-name">.icon-biaoqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anniu-zan"></span>
            <div class="name">
              按钮-赞
            </div>
            <div class="code-name">.icon-anniu-zan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqing_xiao"></span>
            <div class="name">
              表情_笑
            </div>
            <div class="code-name">.icon-biaoqing_xiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengchang"></span>
            <div class="name">
              成长
            </div>
            <div class="code-name">.icon-chengchang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icon-dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duanxin"></span>
            <div class="name">
              短信
            </div>
            <div class="code-name">.icon-duanxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerentouxiang"></span>
            <div class="name">
              个人头像
            </div>
            <div class="code-name">.icon-gerentouxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qunzu"></span>
            <div class="name">
              群组
            </div>
            <div class="code-name">.icon-qunzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjiahaoyou"></span>
            <div class="name">
              添加好友
            </div>
            <div class="code-name">.icon-tianjiahaoyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wangwanglikai"></span>
            <div class="name">
              旺旺离开
            </div>
            <div class="code-name">.icon-wangwanglikai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zan"></span>
            <div class="name">
              赞
            </div>
            <div class="code-name">.icon-zan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daibanrenwu_quxiao"></span>
            <div class="name">
              待办任务_取消
            </div>
            <div class="code-name">.icon-daibanrenwu_quxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daibanrenwu"></span>
            <div class="name">
              待办任务
            </div>
            <div class="code-name">.icon-daibanrenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-naozhong"></span>
            <div class="name">
              闹钟
            </div>
            <div class="code-name">.icon-naozhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-riqi"></span>
            <div class="name">
              日期
            </div>
            <div class="code-name">.icon-riqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuzhuangtu"></span>
            <div class="name">
              树状图
            </div>
            <div class="code-name">.icon-shuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yun"></span>
            <div class="name">
              云
            </div>
            <div class="code-name">.icon-yun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bingtu"></span>
            <div class="name">
              饼图
            </div>
            <div class="code-name">.icon-bingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunshangchuan"></span>
            <div class="name">
              云上传
            </div>
            <div class="code-name">.icon-yunshangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunxiazai"></span>
            <div class="name">
              云下载
            </div>
            <div class="code-name">.icon-yunxiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhexiantu"></span>
            <div class="name">
              折线图
            </div>
            <div class="code-name">.icon-zhexiantu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuzhuangtu"></span>
            <div class="name">
              柱状图
            </div>
            <div class="code-name">.icon-zhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoguo_lanshou"></span>
            <div class="name">
              包裹_揽收
            </div>
            <div class="code-name">.icon-baoguo_lanshou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoguo_huanbaohe"></span>
            <div class="name">
              包裹_环保盒
            </div>
            <div class="code-name">.icon-baoguo_huanbaohe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoguo_dakai"></span>
            <div class="name">
              包裹_打开
            </div>
            <div class="code-name">.icon-baoguo_dakai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoguo_hezi"></span>
            <div class="name">
              包裹_盒子
            </div>
            <div class="code-name">.icon-baoguo_hezi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-didiandingwei"></span>
            <div class="name">
              地点定位
            </div>
            <div class="code-name">.icon-didiandingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditu_dingwei"></span>
            <div class="name">
              地图_定位
            </div>
            <div class="code-name">.icon-ditu_dingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiji_qifei"></span>
            <div class="name">
              飞机_起飞
            </div>
            <div class="code-name">.icon-feiji_qifei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaojijibao"></span>
            <div class="name">
              高级集包
            </div>
            <div class="code-name">.icon-gaojijibao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huoche"></span>
            <div class="name">
              货车
            </div>
            <div class="code-name">.icon-huoche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuwu"></span>
            <div class="name">
              服务
            </div>
            <div class="code-name">.icon-fuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jingliren"></span>
            <div class="name">
              经理人
            </div>
            <div class="code-name">.icon-jingliren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huopinfenliu"></span>
            <div class="name">
              货品分流
            </div>
            <div class="code-name">.icon-huopinfenliu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yizhan"></span>
            <div class="name">
              驿站
            </div>
            <div class="code-name">.icon-yizhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duanxinqunfa"></span>
            <div class="name">
              短信群发
            </div>
            <div class="code-name">.icon-duanxinqunfa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongzhizhongxin"></span>
            <div class="name">
              通知中心
            </div>
            <div class="code-name">.icon-tongzhizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjian"></span>
            <div class="name">
              邮件
            </div>
            <div class="code-name">.icon-youjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dengchu"></span>
            <div class="name">
              登出
            </div>
            <div class="code-name">.icon-dengchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenxinxi"></span>
            <div class="name">
              个人信息
            </div>
            <div class="code-name">.icon-gerenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anniu_gerenzhongxin"></span>
            <div class="name">
              按钮_个人中心
            </div>
            <div class="code-name">.icon-anniu_gerenzhongxin
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianqie"></use>
                </svg>
                <div class="name">剪切</div>
                <div class="code-name">#icon-jianqie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwu"></use>
                </svg>
                <div class="name">购物</div>
                <div class="code-name">#icon-gouwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuanweixuanzhong"></use>
                </svg>
                <div class="name">单选未选中</div>
                <div class="code-name">#icon-danxuanweixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuanxuanzhong"></use>
                </svg>
                <div class="name">单选选中</div>
                <div class="code-name">#icon-danxuanxuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-kefu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lanya"></use>
                </svg>
                <div class="name">蓝牙</div>
                <div class="code-name">#icon-lanya</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianjie"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#icon-lianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuanweixuanzhong"></use>
                </svg>
                <div class="name">多选未选中</div>
                <div class="code-name">#icon-duoxuanweixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengyin"></use>
                </svg>
                <div class="name">声音</div>
                <div class="code-name">#icon-shengyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingzhi"></use>
                </svg>
                <div class="name">停止</div>
                <div class="code-name">#icon-tingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingwen"></use>
                </svg>
                <div class="name">英文</div>
                <div class="code-name">#icon-yingwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhendong"></use>
                </svg>
                <div class="name">震动</div>
                <div class="code-name">#icon-zhendong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuti"></use>
                </svg>
                <div class="name">主题</div>
                <div class="code-name">#icon-zhuti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anniu_guanbi"></use>
                </svg>
                <div class="name">按钮_关闭</div>
                <div class="code-name">#icon-anniu_guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#icon-anquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangzhu"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#icon-bangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge"></use>
                </svg>
                <div class="name">表格</div>
                <div class="code-name">#icon-biaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anniu_xuanzhong"></use>
                </svg>
                <div class="name">按钮_选中</div>
                <div class="code-name">#icon-anniu_xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chexiao"></use>
                </svg>
                <div class="name">撤销</div>
                <div class="code-name">#icon-chexiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duihao"></use>
                </svg>
                <div class="name">对号</div>
                <div class="code-name">#icon-duihao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidan"></use>
                </svg>
                <div class="name">菜单</div>
                <div class="code-name">#icon-caidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanyu"></use>
                </svg>
                <div class="name">关于</div>
                <div class="code-name">#icon-guanyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinggao"></use>
                </svg>
                <div class="name">警告</div>
                <div class="code-name">#icon-jinggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lishijilu"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#icon-lishijilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saoyisao"></use>
                </svg>
                <div class="name">扫一扫</div>
                <div class="code-name">#icon-saoyisao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Androidgengduo"></use>
                </svg>
                <div class="name">Android更多</div>
                <div class="code-name">#icon-Androidgengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iosgengduo"></use>
                </svg>
                <div class="name">ios更多</div>
                <div class="code-name">#icon-iosgengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_liebiaoxiangyou"></use>
                </svg>
                <div class="name">箭头_列表向右</div>
                <div class="code-name">#icon-jiantou_liebiaoxiangyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_liebiaoshouqi"></use>
                </svg>
                <div class="name">箭头_列表收起</div>
                <div class="code-name">#icon-jiantou_liebiaoshouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_liebiaoxiangzuo"></use>
                </svg>
                <div class="name">箭头_列表向左</div>
                <div class="code-name">#icon-jiantou_liebiaoxiangzuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_liebiaozhankai"></use>
                </svg>
                <div class="name">箭头_列表展开</div>
                <div class="code-name">#icon-jiantou_liebiaozhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_shangyiye"></use>
                </svg>
                <div class="name">箭头_上一页</div>
                <div class="code-name">#icon-jiantou_shangyiye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_xiayiye"></use>
                </svg>
                <div class="name">箭头_下一页</div>
                <div class="code-name">#icon-jiantou_xiayiye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_xiangyou"></use>
                </svg>
                <div class="name">箭头_向右</div>
                <div class="code-name">#icon-jiantou_xiangyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_xiangzuo"></use>
                </svg>
                <div class="name">箭头_向左</div>
                <div class="code-name">#icon-jiantou_xiangzuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_xiangyouliangci"></use>
                </svg>
                <div class="name">箭头_向右两次</div>
                <div class="code-name">#icon-jiantou_xiangyouliangci</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_shangxiaqiehuan"></use>
                </svg>
                <div class="name">箭头_上下切换</div>
                <div class="code-name">#icon-jiantou_shangxiaqiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_yemian_xiangshang"></use>
                </svg>
                <div class="name">箭头_页面_向上</div>
                <div class="code-name">#icon-jiantou_yemian_xiangshang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_xiangxia"></use>
                </svg>
                <div class="name">箭头_向下</div>
                <div class="code-name">#icon-jiantou_xiangxia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_xiangshang"></use>
                </svg>
                <div class="name">箭头_向上</div>
                <div class="code-name">#icon-jiantou_xiangshang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_xiangzuoliangci"></use>
                </svg>
                <div class="name">箭头_向左两次</div>
                <div class="code-name">#icon-jiantou_xiangzuoliangci</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_yemian_xiangxia"></use>
                </svg>
                <div class="name">箭头_页面_向下</div>
                <div class="code-name">#icon-jiantou_yemian_xiangxia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_yemian_xiangyou"></use>
                </svg>
                <div class="name">箭头_页面_向右</div>
                <div class="code-name">#icon-jiantou_yemian_xiangyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_zuoyouqiehuan"></use>
                </svg>
                <div class="name">箭头_左右切换</div>
                <div class="code-name">#icon-jiantou_zuoyouqiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_yemian_xiangzuo"></use>
                </svg>
                <div class="name">箭头_页面_向左</div>
                <div class="code-name">#icon-jiantou_yemian_xiangzuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moduanzhankai"></use>
                </svg>
                <div class="name">末端展开</div>
                <div class="code-name">#icon-moduanzhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moduanzuoyouzhankai"></use>
                </svg>
                <div class="name">末端左右展开</div>
                <div class="code-name">#icon-moduanzuoyouzhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quxiaoquanping"></use>
                </svg>
                <div class="name">取消全屏</div>
                <div class="code-name">#icon-quxiaoquanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cai"></use>
                </svg>
                <div class="name">踩</div>
                <div class="code-name">#icon-cai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqing"></use>
                </svg>
                <div class="name">表情</div>
                <div class="code-name">#icon-biaoqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anniu-zan"></use>
                </svg>
                <div class="name">按钮-赞</div>
                <div class="code-name">#icon-anniu-zan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqing_xiao"></use>
                </svg>
                <div class="name">表情_笑</div>
                <div class="code-name">#icon-biaoqing_xiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengchang"></use>
                </svg>
                <div class="name">成长</div>
                <div class="code-name">#icon-chengchang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icon-dianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duanxin"></use>
                </svg>
                <div class="name">短信</div>
                <div class="code-name">#icon-duanxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerentouxiang"></use>
                </svg>
                <div class="name">个人头像</div>
                <div class="code-name">#icon-gerentouxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qunzu"></use>
                </svg>
                <div class="name">群组</div>
                <div class="code-name">#icon-qunzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjiahaoyou"></use>
                </svg>
                <div class="name">添加好友</div>
                <div class="code-name">#icon-tianjiahaoyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wangwanglikai"></use>
                </svg>
                <div class="name">旺旺离开</div>
                <div class="code-name">#icon-wangwanglikai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zan"></use>
                </svg>
                <div class="name">赞</div>
                <div class="code-name">#icon-zan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daibanrenwu_quxiao"></use>
                </svg>
                <div class="name">待办任务_取消</div>
                <div class="code-name">#icon-daibanrenwu_quxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daibanrenwu"></use>
                </svg>
                <div class="name">待办任务</div>
                <div class="code-name">#icon-daibanrenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-naozhong"></use>
                </svg>
                <div class="name">闹钟</div>
                <div class="code-name">#icon-naozhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-riqi"></use>
                </svg>
                <div class="name">日期</div>
                <div class="code-name">#icon-riqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuzhuangtu"></use>
                </svg>
                <div class="name">树状图</div>
                <div class="code-name">#icon-shuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yun"></use>
                </svg>
                <div class="name">云</div>
                <div class="code-name">#icon-yun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bingtu"></use>
                </svg>
                <div class="name">饼图</div>
                <div class="code-name">#icon-bingtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunshangchuan"></use>
                </svg>
                <div class="name">云上传</div>
                <div class="code-name">#icon-yunshangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunxiazai"></use>
                </svg>
                <div class="name">云下载</div>
                <div class="code-name">#icon-yunxiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhexiantu"></use>
                </svg>
                <div class="name">折线图</div>
                <div class="code-name">#icon-zhexiantu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuzhuangtu"></use>
                </svg>
                <div class="name">柱状图</div>
                <div class="code-name">#icon-zhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoguo_lanshou"></use>
                </svg>
                <div class="name">包裹_揽收</div>
                <div class="code-name">#icon-baoguo_lanshou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoguo_huanbaohe"></use>
                </svg>
                <div class="name">包裹_环保盒</div>
                <div class="code-name">#icon-baoguo_huanbaohe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoguo_dakai"></use>
                </svg>
                <div class="name">包裹_打开</div>
                <div class="code-name">#icon-baoguo_dakai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoguo_hezi"></use>
                </svg>
                <div class="name">包裹_盒子</div>
                <div class="code-name">#icon-baoguo_hezi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-didiandingwei"></use>
                </svg>
                <div class="name">地点定位</div>
                <div class="code-name">#icon-didiandingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditu_dingwei"></use>
                </svg>
                <div class="name">地图_定位</div>
                <div class="code-name">#icon-ditu_dingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feiji_qifei"></use>
                </svg>
                <div class="name">飞机_起飞</div>
                <div class="code-name">#icon-feiji_qifei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaojijibao"></use>
                </svg>
                <div class="name">高级集包</div>
                <div class="code-name">#icon-gaojijibao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huoche"></use>
                </svg>
                <div class="name">货车</div>
                <div class="code-name">#icon-huoche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuwu"></use>
                </svg>
                <div class="name">服务</div>
                <div class="code-name">#icon-fuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jingliren"></use>
                </svg>
                <div class="name">经理人</div>
                <div class="code-name">#icon-jingliren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huopinfenliu"></use>
                </svg>
                <div class="name">货品分流</div>
                <div class="code-name">#icon-huopinfenliu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yizhan"></use>
                </svg>
                <div class="name">驿站</div>
                <div class="code-name">#icon-yizhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duanxinqunfa"></use>
                </svg>
                <div class="name">短信群发</div>
                <div class="code-name">#icon-duanxinqunfa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhizhongxin"></use>
                </svg>
                <div class="name">通知中心</div>
                <div class="code-name">#icon-tongzhizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjian"></use>
                </svg>
                <div class="name">邮件</div>
                <div class="code-name">#icon-youjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dengchu"></use>
                </svg>
                <div class="name">登出</div>
                <div class="code-name">#icon-dengchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenxinxi"></use>
                </svg>
                <div class="name">个人信息</div>
                <div class="code-name">#icon-gerenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anniu_gerenzhongxin"></use>
                </svg>
                <div class="name">按钮_个人中心</div>
                <div class="code-name">#icon-anniu_gerenzhongxin</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
